<template>
    <div class="headBox">
        <div class="course-header">
            <div class="header-content">
                <div class="courseDesc">
                    <div class="componentsBreadcrumb hidden-xs-only">
                        <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb"><span
                                class="el-breadcrumb__item"><span role="link"
                                    class="el-breadcrumb__inner is-link">首页</span><span role="presentation"
                                    class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"
                                aria-current="page"><span role="link" class="el-breadcrumb__inner"> 学习广场 </span><span
                                    role="presentation" class="el-breadcrumb__separator">/</span></span></div>
                    </div>
                </div>
                <div class="courseName">学习广场</div>
            </div>
        </div>
        <div class="courseTypeBox">
            <div class="courseTypeList">
                <button v-for="(_, tab) in tabs" :key="tab" :class="['courseType', { active: currentTab === tab }]"
                    @click="currentTab = tab">
                    {{ tab }}
                </button>
                <div class="searchInputBox">
                    <div class="searchInput">
                        <div class="input-with-select el-input el-input-group el-input-group--append"><!----><input
                                type="text" autocomplete="off" placeholder="输入课程名称 / 课程ID / 讲师"
                                class="el-input__inner"><!----><!---->
                            <div class="el-input-group__append"><button type="button"
                                    class="el-button el-button--default"><!----><i
                                        class="iconfont iconsearch"></i>搜索</button></div><!---->
                        </div>
                    </div>
                </div>
                <component :is="tabs[currentTab]" class="tab"></component>
            </div>
        </div>

    </div>
</template>
<script setup>
    import learn from './learn.vue'
    import srp from './srp.vue'
    import competition from './competition.vue'
    import Training from './training.vue'
    import self from './self-learning.vue'
    import { ref } from 'vue'

    const currentTab = ref('常规课程(10)')

    const tabs = {
        '常规课程(10)': learn,
        'SRP(0)': srp,
        '比赛(0)': competition,
        '实训(1)': Training,
        '自主学习(0)': self
    }

</script>
<style>
    .course-header {
        height: 148px;
        background: url(https://www.codelover.club/static/img/courseBg.43bcf71c.png) no-repeat;
        background-repeat: no-repeat;
        background-size: 100% 100%
    }

    .course-header .header-content {
        position: relative;
        padding-top: 34px;
        margin: 0 auto;
        max-width: 1200px
    }

    .course-header .courseName {
        margin-top: 12px;
        width: 100%;
        font-family: PMingLiU-ExtB;
        font-size: 32px;
        color: #fff;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .courseTypeList {
        max-width: 1200px;
        margin: 0 auto;
        height: 80px;
        /* display: flex; */
        justify-content: flex-start;
        align-items: center
    }

    .courseTypeList .courseType {
        margin-right: 40px;
        position: relative;
        cursor: pointer;
        margin-left: 5px;
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 20px;
        color: #003262;
        border: none;
        background-color: #fff;
    }

    .courseTypeList .courseType.active {
        font-weight: bold;
        text-decoration: underline;
    }

    /* 当按钮被点击时，添加 active 类 */
    .courseTypeList .courseType:active {
        font-weight: bold;
        text-decoration: underline;
    }

    .headBox .searchInputBox {
        max-width: 1200px;
        margin: 0 auto;
        margin-left: 100px;
        margin-bottom: 30px
    }

    .headBox .searchInputBox .searchInput {
        width: 309px;
        height: 36px
    }

    .headBox .searchInputBox .searchInput .input-with-select .el-input__inner {
        height: 36px;
        line-height: 36px;
        border-color: #d9dde1;
        border-right: none;
        color: #333
    }

    .headBox .searchInputBox .searchInput .input-with-select .el-input-group__append {
        background: #f1ae3d;
        border-color: #f1ae3d
    }

    .headBox .searchInputBox .searchInput .input-with-select .el-input-group__append .iconsearch {
        color: #fff
    }
</style>